/**
 * 1 点击 “+” 触发tap点击事件
 *  1 调用小程序内置的 选择图片的 api
 *  2 获取到 图片的路径 数组
 *  3 把图片路径 存到 data的变量中
 *  4 页面就可以根据 图片数组 进行 循环显示 自定义组件
 * 2 点击删除图片按钮
 *  1 在子组件中添加事件，触发父组件的 handleClear 事件
 *  2 在组件中添加事件，并传递图片的下标index
 *  3 获取图片的下标
 *  4 获取图片数组，并删除要输出的图片
 *  5 将图片数组保存回页面中
 * 3 点击“提交”
 *  1 获取文本域的内容 类似输入框的获取
 *  2 对这些内容 合法性验证
 *  3 验证通过 用户选择的图片 上传到专门的图片的服务器 返回图片的外网链接
 *  4 文本域 和 外网的图片的路径 一起提交到服务器 前端的模型 不会发送请求到后台
 *  5 清空当前页面
 *  6 返回上一页
 */
 import { showToast } from "../../utils/asyncWx.js"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //设置标题数据
    Tabs: [{
      id: 0,
      text: "体验问题",
      isAction: true
    }, {
      id: 1,
      text: "商品、商家投诉",
      isAction: false
    }],
    chooseImg:[],
    TextArea:"",
  },
  uploadImage:[],
  //标题点击事件，从子组件传递过来
  tabsItemChange(e) {
    //获取子组件，URL传参方式传过来的参数
    const { index } = e.detail;
    //更新数据
    let { Tabs } = this.data;
    Tabs.forEach((v, i) => i === index ? v.isAction = true : v.isAction = false);
    this.setData({
      Tabs
    });
  },
  // 点击添加图片
  handleAddImage(){
    wx.chooseImage({
      count: 9,
      sizeType: ['original','compressed'],
      sourceType: ['album','camera'],
      success: (result)=>{
        this.setData({
          chooseImg:[...this.data.chooseImg,...result.tempFilePaths]
        });
      }
    });
  },
  // 图片删除，从子组件传递过来
  handleClear(e){
    // 1 获取图片在图片数组中的下标
    const {index} = e.currentTarget.dataset;
    // 2 获取图片数组
    let {chooseImg} = this.data;
    // 3 删除，要删除的图片
    chooseImg.splice(index,1);
    // 4 保存图片数组
    this.setData({
      chooseImg
    });
  },
  // 点击提交
  handleSubmit(){
    // 1 获取文本框里的内容  图片数组
    const {TextArea, chooseImg} = this.data;
    // 2 对文本框的内容 进行 合法性验证
    if(!TextArea.trim()){
      showToast({title:"请输入内容！",mash:true});
      return;
    }
    
    //2.5 提示正在提交，同时禁止其他操作
    wx.showLoading({
      title: "正在提交，请稍后！",
      mask: true
    });
    
    //3 判断是否添加了图片，
    //   有 遍历图片数组，上传图片
    //   没有 侧不上传图片
    if(chooseImg.length!==0){
      chooseImg.forEach(v=>{
      //3.1 上传图片
        wx.uploadFile({
          url: 'http://img.coolcr.cn/api/upload',
          filePath: v,
          name: "image",
          formData: {},
          success: (result) => {
            // 3.2 将返回的外网图片信息，从Json格式转成键值对
            const uploadImage = JSON.parse(result.data).data;
            // 3.3 将 外网图片信息，存到 外网图片信息数组 中
            this.uploadImage.push(uploadImage);
          },
          fail:(err)=>{
            // 3.4 失败报错
            // showToast({title:"图片上传失败\n我也莫得办法...",mash:true,duration:4000});
            console.log({...err,Author_msg:"上次图片失败！"});
          }
        });
      });
    }
    // 4 关闭 正在提交 提示
    wx.hideLoading();
    // 5 完成 提交 提示
    showToast({title:"您的意见已提交！",mash:true});
    // 6 跳转回上一个页面
    wx.navigateBack({
      delta: 1
    });
  },
  // 文本域事件
  handleTextArea(e){
    // 保存文本框的内容
    this.setData({
      TextArea:e.detail.value
    });
  }
})